import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import BattleItem from './BattleItem.tsx'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}
class WatchCodeShow extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      roomNo: 1,
      combatList: [],
      loading: false
    }
  }

  public componentDidMount() {
    console.log(this.props.match.params)
    const {roomNo} = this.props.match.params
    this.setState({roomNo})
    this.queryBattles(roomNo)
    sessionStorage.setItem('WatchRoomNo', roomNo)
    
  }

  queryBattles(roomNo) {
    const url = `${config.pre}/recordCenter/roomNo/${roomNo}`
    const opt = { method: 'GET' }
    this.setState({loading: true})
    fetchJson(url, opt).then(data => {
      this.setState({loading: false})
      if (data.result) {
        this.setState({combatList: []})
        return
      }
      const {combatList, roombatList} = data.data.dataList[0]
      const zipResult = _.zipWith(combatList, roombatList, (c, r) => ({...c, ...r}))
      console.log(zipResult)
      this.setState({combatList: zipResult})
    })
  }

  public render() {
    const { inviteId, tip, period, combatList, loading, showRoundRelplay } = this.state
    return <div className="view-page battle-view">
      <div className="detail-middle noTop">
        <div className="watch-code-top"></div>
        <div className="content">
          <div className="info full-height">
            {
              combatList.map((battle, index) => (<BattleItem data={battle} key={index}></BattleItem>))
            }
            {
              combatList.length === 0 && !loading ? <div className="empty-tip">暂无记录</div> : null
            }
          </div>
        </div>
      </div>
      <div className="usercenter-bottom">
        <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt="" />
        <div className="text"><span>回放码查看</span></div>
        <img onClick={() => window.history.go(-1)} className="back" src="img/app/back.png?v=20181201" alt="" />
        {/* <NavLink to="/Records"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink> */}
      </div>
    </div>
  }

}

export default connect(mapStateToProps)(WatchCodeShow)